<template>
    <div>
        <el-table 
        :data="tableData" style="width: 100%"
        :header-cell-class-name="'headerCell'"
        >
            <template v-for="item in headerData" :key="item.prop">
                <el-table-column  
                :prop="item.prop" 
                :label="item.label" 
                :min-width="item.width || 'auto'" 
                :align="item.align ? item.align : 'center'"
                :fixed="item.fixed? item.fixed: true"
                >
                    <template #default="scope" >
                        <template v-if="item.isCustom">
                            <slot :name="item.prop" :data="scope.row" />
                        </template>
                        <template v-else>
                            <span>{{ scope.row[item.prop] }}</span>
                        </template>
                    </template>
                </el-table-column>
            </template>
            <!-- <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" /> -->
        </el-table>
    </div>
</template>

<script setup lang="ts">
const props = defineProps<{
    tableData: any[],
    headerData: any[]
}>()

</script>

<style scoped lang="css">
.headerCell {
    border-radius: 30px !important;
    height: 30px;
}
:deep(.el-table th.el-table__cell) {
    background-color: #000;
    border: 0;
}
:deep(.el-table  th.el-table__cell:first-child) {
    border-top-left-radius: 10px;
    /* border-bottom-left-radius: 10px; */
}
:deep(.el-table  th.el-table__cell:last-child) {
    border-top-right-radius: 10px;
    /* border-bottom-right-radius: 10px; */
}
:deep(.el-table__body-wrapper){
    background-color: #000;
}
:deep(.el-table){
    background: #25212B;
}
:deep(.el-table tr) {
    background: transparent;
}
:deep(.el-table--enable-row-hover){
    border-radius: 10px;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background: #3B3643;
    /* border-radius: 10px; */
}
:deep(tbody tr:hover>td ){ 
    background: #3B3643  !important;
} 
/* :deep(.el_table tbady tr:hover >td.el-table__row) {
    border-radius: 10px;
} */
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
    background: #25212B;
    border-bottom: 1px solid #3A363E;
}
:deep(.el-table__inner-wrapper::before) {
    width: 0;
}
:deep(.el-table__row  .cell){
    height: 6vh;
    color: #fff;
    line-height: 6vh;
}
:deep(.el-table__body-wrapper) {
    background: #25212B;
}
:deep(.el-scrollbar__view){
    background: #3B3643;
}
</style>